<template>
    <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px"
             class="demo-ruleForm login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="userName">
            <el-input type="text" v-model="loginForm.userName" auto-complete="on" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click="submitForm">登录
            </el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
    </el-form>
</template>

<script>
    import service from '@/api/service'

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    userName: "ylfjm",
                    password: "123456"
                },
                rules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm() {
                // let user = {"username": "zhangbo", "password": "123456"};
                // localStorage.setItem('user', JSON.stringify(user));
                // this.$store.commit('setUser', user);
                // this.$router.push('/home');
                this.$refs['loginForm'].validate(async (valid) => {
                    if (valid) {
                        const res = await service.login(this.loginForm);
                        if (res.status < 400 && res.res) {
                            let userInfo = res.res;
                            console.log(userInfo);
                            let menus = userInfo.menus.map(item => {
                                return Object.assign({}, item, {
                                    childUrls: item.subMenus.map(c => {
                                        return c.url
                                    })
                                });
                            });
                            this.$store.commit('getMenuList', menus);
                            this.$store.commit('setUserInfo', userInfo);
                            localStorage.setItem('userInfo', JSON.stringify(userInfo));
                            localStorage.setItem('ADMIN_TOKEN', userInfo.token);
                            localStorage.setItem('menus', JSON.stringify(menus));
                            this.$router.push('/home');
                        } else {
                            this.$notify({
                                title: '提示',
                                message: '登录失败',
                                duration: 5000
                            });
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    }

</script>

<style scoped lang="stylus">
    .login-container {
         -webkit-border-radius: 5px;
        border-radius: 5px;
         -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;

        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }

        .remember {
            margin: 0px 0px 35px 0px;
        }
    }
</style>
<!--<template>-->
    <!--<div class="login_box">-->
        <!--<el-form :model="form" status-icon :rules="rules" ref="form" style="width: 500px;margin: 300px auto;"-->
                 <!--label-width="100px">-->
            <!--<el-form-item label="用户名" prop="userName">-->
                <!--<el-input v-model="form.userName" autocomplete="on"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="密码" prop="password">-->
                <!--<el-input type="password" v-model="form.password" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item>-->
                <!--<el-button type="primary" @click="submitForm">登录</el-button>-->
            <!--</el-form-item>-->
        <!--</el-form>-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
    <!--import service from '@/api/service'-->

    <!--export default {-->
        <!--name: 'login',-->
        <!--data() {-->
            <!--return {-->
                <!--form: {-->
                    <!--userName: "",-->
                    <!--password: ""-->
                <!--},-->
                <!--rules: {-->
                    <!--userName: [-->
                        <!--{required: true, message: '请输入用户名', trigger: 'blur'}-->
                    <!--],-->
                    <!--password: [-->
                        <!--{required: true, message: '请输入密码', trigger: 'blur'}-->
                    <!--]-->
                <!--}-->
            <!--}-->
        <!--},-->
        <!--methods: {-->
            <!--submitForm() {-->
                <!--this.$refs['form'].validate(async (valid) => {-->
                    <!--if (valid) {-->
                        <!--const res = await service.login(this.form)-->
                        <!--if (res.status < 400 && res.res) {-->
                            <!--let userInfo = res.res-->
                            <!--let menus = userInfo.menus.map(item => {-->
                                <!--return Object.assign({}, item, {-->
                                    <!--childUrls: item.subMenus.map(c => {-->
                                        <!--return c.url-->
                                    <!--})-->
                                <!--})-->
                            <!--})-->
                            <!--this.$store.commit('getMenuList', menus)-->
                            <!--this.$store.commit('setUserInfo', userInfo)-->
                            <!--localStorage.setItem('userInfo', JSON.stringify(userInfo))-->
                            <!--localStorage.setItem('ADMIN_TOKEN', userInfo.token)-->
                            <!--localStorage.setItem('menus', JSON.stringify(menus))-->
                            <!--this.$router.push('/')-->
                        <!--} else {-->
                            <!--this.$notify({-->
                                <!--title: '提示',-->
                                <!--message: '登录失败',-->
                                <!--duration: 5000-->
                            <!--});-->
                        <!--}-->
                    <!--} else {-->
                        <!--return false;-->
                    <!--}-->
                <!--});-->

            <!--}-->
        <!--}-->
    <!--}-->
<!--</script>-->
<!--<style scoped lang="stylus">-->
    <!--.login_box-->
        <!--position absolute;-->
        <!--background-color #FFFFFF;-->
        <!--top 0;-->
        <!--left 0;-->
        <!--right 0;-->
        <!--bottom 0;-->
        <!--z-index: 1000;-->
<!--</style>-->
